<style>
    .analytics{
        padding: 30px;
    }

    .analytics-item{
        padding-top: 20px;
    }

    .analytics-item.first{
        padding-top: 0;
    }

    .analytics-choice{
        width: 100%;
    }

    .analytics-choice tr{
        border-top: 1px dotted #ddd;
    }

    .analytics-choice tr:hover{
        background-color: #f0fcff;
    }

    .analytics-choice-header{
        background: #EAEDEE;
        font-weight: 600;
    }

    .analytics-choice tr td{
        padding: 11px 15px;
        border-right: 1px dotted #ddd;
    }

    .analytics-percent{
        display: inline-block;
        width: 30px;
    }

    .analytics-progress{
        display: inline-block;
        width: 300px;
        height: 15px;
        background: #f0efef;
        border-radius: 3px;
        vertical-align: middle;
        margin-left: 5px;
    }

    .analytics-progress span{
        display: block;
        width: 0;
        height: 100%;
        background: #ED6908;
        border-radius: 3px;
    }

    .analytics-item-title{
        background: #EAEDEE;
        padding: 11px 15px;
        font-weight: 600;
        margin-left: 5px;
        border-top: 1px dotted #ddd;
    }

</style>

<script src="<?php echo ROOT_URL; ?>public/highchart/highcharts.js"></script>
<script src="<?php echo ROOT_URL; ?>public/highchart/data.js"></script>
<script src="<?php echo ROOT_URL; ?>public/highchart/drilldown.js"></script>

<div class="analytics">
    <h3><?php echo $survey[0]['survey_child_name']; ?></h3>
    <!--<pre>
        <?php
/*            var_dump($question);
        */?>
    </pre>-->

    <?php
        $number = 0;
        foreach($question as $value){
            $type = $value['question_type'];
            switch($type){
                case "1":{
                    ?>
                        <div class="analytics-item <?php if($number == 0){ echo 'first'; } ?>">
                            <table class="analytics-choice">
                                <tr class="analytics-choice-header">
                                    <td style="width: 300px"><?php echo $value['question_name']; ?></td>
                                    <td></td>
                                    <td></td>
                                </tr>
                                <?php
                                    //Tổng số người trả lời câu hỏi
                                    $total = 0;
                                    if(isset($value['total'])) {
                                        $total = $value['total'];
                                    }
                                    if(isset($value['children'])){
                                        foreach($value['children'] as $v){
                                            //Số người trả lời trên câu trả lời này.
                                            $num = 0;
                                            if(isset($v['number'])){
                                                $num = $v['number'];
                                            }
                                            ?>
                                                <tr>
                                                    <td><?php echo $v['question_name']; ?></td>
                                                    <td style="min-width: 370px">
                                                        <span class="analytics-percent">
                                                            <?php
                                                                if($total == 0){
                                                                    echo "0%";
                                                                }else{
                                                                    echo round(($num/$total)*100)."%";
                                                                }
                                                            ?>
                                                        </span>
                                                        <div class="analytics-progress">
                                                            <span style="width: <?php if($total == 0){ echo "0%"; }else{ echo round(($num/$total)*100)."%"; }  ?>"></span>
                                                        </div>
                                                    </td>
                                                    <td> <?php echo $num; ?> </td>
                                                </tr>
                                            <?php
                                        }
                                    }
                                ?>
                                <!--<tr>
                                    <td>Từ 3 triệu đến dưới 7.5 triệu đồng</td>
                                    <td>
                                        <span class="analytics-percent">30%</span>
                                        <div class="analytics-progress">
                                            <span style="width: 40%"></span>
                                        </div>
                                    </td>
                                    <td>234</td>
                                </tr>
                                <tr>
                                    <td>Từ 7.5 triệu đến dưới 30 triệu đồng</td>
                                    <td>
                                        <span class="analytics-percent">0%</span>
                                        <div class="analytics-progress">
                                            <span></span>
                                        </div>
                                    </td>
                                    <td>3342</td>
                                </tr>-->
                            </table>
                        </div>
                    <?php
                    break;
                }
                case "2":{
                    ?>
                        <div class="analytics-item <?php if($number == 0){ echo 'first'; } ?>">
                            <table class="analytics-choice">
                                <tr class="analytics-choice-header">
                                    <td><?php echo $value['question_name']; ?></td>
                                    <td></td>
                                    <td></td>
                                </tr>
                                <?php
                                    //Tổng số người trả lời câu hỏi
                                    $total = 0;
                                    if(isset($value['total'])) {
                                        $total = $value['total'];
                                    }
                                    if(isset($value['children'])){
                                        foreach($value['children'] as $v){
                                            //Số người trả lời trên câu trả lời này.
                                            $num = 0;
                                            if(isset($v['number'])){
                                                $num = $v['number'];
                                            }
                                            ?>
                                            <tr>
                                                <td><?php echo $v['question_name']; ?></td>
                                                <td style="min-width: 370px">
                                                    <span class="analytics-percent">
                                                        <?php
                                                            if($total == 0){
                                                                echo "0%";
                                                            }else{
                                                                echo round(($num/$total)*100)."%";
                                                            }
                                                        ?>
                                                    </span>
                                                    <div class="analytics-progress">
                                                        <span style="width: <?php if($total == 0){ echo "0%"; }else{ echo round(($num/$total)*100)."%"; }  ?>"></span>
                                                    </div>
                                                </td>
                                                <td> <?php echo $num; ?> </td>
                                            </tr>
                                        <?php
                                        }
                                    }
                                ?>
                            </table>
                        </div>
                    <?php
                    break;
                }
                case "3":{
                    $rows = array();
                    foreach($value['rows'] as $v){
                        $rows[] = $v['question_name'];
                    }

                    ?>
                        <div class="analytics-item">
                            <div class="analytics-item-title">
                                Độ dày của tóc bạn như thế nào?
                            </div>
                            <div class="analytics-table-<?php echo $number; ?>"></div>
                        </div>
                        <script>
                            $(function () {
                                $('.analytics-table-<?php echo $number; ?>').highcharts({
                                    chart: {
                                        type: 'bar',
                                        marginBottom: 130,
                                        spacingBottom: 100
                                    },
                                    title: {
                                        text: ''
                                    },
                                    subtitle: {
                                        text: ''
                                    },
                                    xAxis: {
                                        categories: <?php echo json_encode($rows); ?>,
                                        title: {
                                            text: null
                                        }
                                    },
                                    yAxis: {
                                        min: 0,
                                        title: {
                                            text: '',
                                            align: 'high'
                                        },
                                        gridLineColor: 'transparent',
                                        labels: {
                                            overflow: 'justify'
                                        }
                                    },
                                    tooltip: {
                                        valueSuffix: ' users'
                                    },
                                    plotOptions: {
                                        bar: {
                                            dataLabels: {
                                                enabled: true
                                            }
                                        }
                                    },
                                    legend: {
                                        align: 'right',
                                        verticalAlign: 'bottom',
                                        x: 10,
                                        y: 30,
                                        floating: true,
                                        borderWidth: 0,
                                        backgroundColor: ((Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'),
                                        shadow: false
                                    },
                                    credits: {
                                        enabled: false
                                    },
                                    series: <?php echo json_encode($value['ans']); ?>
                                });
                            });
                        </script>
                    <?php
                    break;
                }
            }
            $number++;
        }
    ?>
    <!--<div class="analytics-item first">
        <table class="analytics-choice">
            <tr class="analytics-choice-header">
                <td>Độ dày của tóc bạn như thế nào?</td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td>Dưới 3 triệu đồng</td>
                <td>
                    <span class="analytics-percent">20%</span>
                    <div class="analytics-progress">
                        <span style="width: 90%"></span>
                    </div>
                </td>
                <td>124</td>
            </tr>
            <tr>
                <td>Từ 3 triệu đến dưới 7.5 triệu đồng</td>
                <td>
                    <span class="analytics-percent">30%</span>
                    <div class="analytics-progress">
                        <span style="width: 40%"></span>
                    </div>
                </td>
                <td>234</td>
            </tr>
            <tr>
                <td>Từ 7.5 triệu đến dưới 30 triệu đồng</td>
                <td>
                    <span class="analytics-percent">0%</span>
                    <div class="analytics-progress">
                        <span></span>
                    </div>
                </td>
                <td>3342</td>
            </tr>
        </table>
    </div>-->

    <!--<div class="analytics-item">
        <div class="analytics-item-title">
            Độ dày của tóc bạn như thế nào?
        </div>
        <div class="analytics-table"></div>
    </div>-->

</div>

<script>
    /*$(function () {
        $('.analytics-table').highcharts({
            chart: {
                type: 'bar',
                marginBottom: 130,
                spacingBottom: 100
            },
            title: {
                text: ''
            },
            subtitle: {
                text: ''
            },
            xAxis: {
                categories: ['Thức uống có ga', 'Nước ép trái cây', 'Sữa, thực phầm từ sữa', 'Cà phê', 'Trà'],
                title: {
                    text: null
                }
            },
            yAxis: {
                min: 0,
                title: {
                    text: '',
                    align: 'high'
                },
                gridLineColor: 'transparent',
                labels: {
                    overflow: 'justify'
                }
            },
            tooltip: {
                valueSuffix: ' millions'
            },
            plotOptions: {
                bar: {
                    dataLabels: {
                        enabled: true
                    }
                }
            },
            legend: {
                align: 'right',
                verticalAlign: 'bottom',
                x: 10,
                y: 30,
                floating: true,
                borderWidth: 0,
                backgroundColor: ((Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'),
                shadow: false
            },
            credits: {
                enabled: false
            },
            series: [{
                name: 'Rất quan tâm (mức độ 5)',
                data: [107, 31, 635, 203, 2]
            }, {
                name: '(mức độ 4)',
                data: [133, 156, 947, 408, 6]
            }, {
                name: 'Khá quan tâm (mức độ 3)',
                data: [973, 914, 4054, 732, 34]
            }]
        });
    });*/
</script>